<template>
<div>

  <van-nav-bar
      title="订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />

  <nav class="order-nav" v-if="orderList">
    <li v-for="(item) in orderList" :key="item.id">
      <div class="info-body">
        <div class="title">订单号：{{item.order_num}}</div>
        <div class="status">订单状态：{{item.status|statusorder }}</div>
        <button class="deleted" @click="deleted(item.id)" >删除</button>
        <button class="updated" >支付</button>
        <div class="pirce">总价:{{item.total_rmb | pirceend}}</div>
      </div>
    </li>

  </nav>

</div>
</template>

<script>

import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
import Ax from "./axios"

const ax = new Ax()
export default {
  name: "order",
  data(){
    return {
      orderList: []
    }
  },
  created() {
    //获取订单信息
    ax.getOrderInfo(this.token, {username:sessionStorage.getItem("userinfo")}).then(response=>{
      this.$set(this, "orderList", response.data.data)

    })

  },
  methods:{
    ...mapActions("model", []),
    ...mapMutations("login", ["setToken"]),
    onClickLeft(){
      this.$router.go(-1)
    },
    deleted(order_id){
      //删除商品
      ax.deleteOrderInfo(this.token, order_id).then(response=>{
        if (response.status === 204){
          this.$router.go(0)

        }else {
          alert("删除失败")
        }
      })
    }

  },
  computed:{
    ...mapGetters("login", []),
    ...mapState("login", ["token"])
  },
  filters:{
    statusorder(val){
      if (val === "ToBePaid"){
        return "订单待支付"
      }
    },
    pirceend(val){
      return val + "¥"
    }


  }
}
</script>

<style scoped lang="less">

  .order-nav{
    list-style: none;
    li{
      width: 90%;
      height: 200px;
      box-sizing: border-box;
      padding: 10px;
      background: floralwhite;
      border-radius: 20px;
      margin: 20px auto 20px;
      .info-body{
        position: relative;
        .title{
          position: absolute;
          font-size: 20px;
          top:20px;

        }
        .status{
          position: absolute;
          top:60px;
        }
        .pirce{
          position: absolute;
          top:150px;
        }
        .deleted{
          position: absolute;
          right: 20px;
          top:30px;
          width: 50px;
          height: 40px;
          border-radius: 10px;
          background: red;
          font-size: 20px;
        }
        .updated{
          position: absolute;
          right: 20px;
          top:140px;
          height: 40px;
          width: 50px;
          border-radius: 10px;
          background: #39a9ed;


        }
      }
    }
  }


</style>